<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>客服页面</title> 
	<style>
	a:link
	{
		color: #000000;
		font-size: 12px;
		text-decoration: none;
		}
	a:visited
	{
		color: #000000;
		font-size: 12px;
		text-decoration: none;
		}
	a:hover
	{
		color: #0000FF;
		font-size: 12px;
		text-decoration: underline;
		}
	a:actived
	{
		color: #000000;
		font-size: 12px;
		text-decoration: none;
		}
	</style>
</head>
<body>
<!-- 大表格 -->
	<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" background="img/bodybg.gif">
		
		<tr width="100%">
			<td>
			<!--大第一行表格 -->
	<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td height="79">
        	<!--logol表格 -->
            <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" background="img/t_4.gif">
              <tr>
                <td width="10%" align="left"  id="logo1">
                	<img  border=0 src="img/t_2.gif" width="141" height="78"> </td>
                <td valign="bottom"  id="tailpiece1" width="25%">
                	<table border="0" style="font-size:12px" width="100%">
	                    <tr>
	                      <td width="100%" nowrap="true" style="cursor:pointer;white-space:nowrap;color:#08789D;">欢迎来到客服页面</td>
	                    </tr>             
	                    <tr>
		                    <td width="100%" nowrap="true" style="cursor:pointer;padding-top:2px;padding-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#08789D;">		                      
		                     </td>
	                    </tr>                 
	                    <tr>
	                        <td width="100%"  nowrap="true" class="a_effect" style="cursor:pointer;padding-top:2px;padding-bottom:2px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;color:#08789D;" title="欢迎" >
	                        		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信服务平台
	                      
	                        </td>
	                    </tr>
                  	</table>                                                    
                  </td>
                  
                <td width="100%" id="maxtoolbar1" style="padding-left:10px;padding-right:10px;" >
              </tr> 
           </table>   
        </td>
        <td background="img/t_4.gif"></td>
      </tr>
      <!-- 大表格 第二行-->
      <tr>
        <td id="line" height='5'></td>
      </tr>
      <!-- 大表格 第三行-->
      <tr>  
        <td valign="top" id="mainmiddle" style="padding:10px;padding-top:0px;padding-bottom:0px;">
		<!-- main-middle -->
            <div id="middle">
            
              <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td>
                      <table width="100%" height="15%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                         
                          <td width="736" background="img/m_22.gif" id="disp21" style="padding-top:2px;"></td>                                       	
                          <td width="12" height="25" align="right" id="disp31"><img src="img/m_17.gif" width="11" height="25"></td>
                        </tr>
                        <tr>
                          <td colspan="4" valign="top" style="background:ivory;;border:1px solid #7892C6;border-top: 0px solid;"></td>
                        </tr>
                      </table>                  
                  </td>
                </tr>
                <tr>
                  <td style="height:15px;"><img src="img/clarity.gif" width="1" height="1"></td>
                </tr>
                <tr>
                  <td height="160" valign="bottom">
                      <table width="99%" height="96%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                          <td id="talk11" width="11" height="25" background="img/m_15.gif" ></td>
                          <td id="talk21" width="100%" background="img/m_22.gif">
                          	<div id="talktoolbar" style="width:240px;">                             
                          	</div>
                          </td>
                          <td id="talk31" width="11" height="25"><img src="img/m_17.gif" width="11" height="25"></td>
                        </tr>
                         <tr>
                          <td colspan="3" style="background:#FFFFFF;border-left:1px solid #7892C6;border-right:1px solid #7892C6;">
                              <!-- 聊天内容显示表格 -->
                              <table id="table1" width="100%" height="279px" border="0" cellpadding="0" cellspacing="0" > 
                              
                              <tr>
                              	 <td  width="100%">
	  								<div id="show" contenteditable style="color:#660000;background-color:ivory;
										font-size:14px;height:100%;width:99%;padding:5px;overflow:auto;border:0px solid;">
											展示聊天内容</div>  
										</td>
										</tr>                                                    
                              </table>                         
                          </td>
                        </tr>
                        <tr>
        					<td id="line1" height='5'></td>
     					 </tr>                        
                        <tr>
                          <td colspan="3" style="background:#FFFFFF;border-left:1px solid #7892C6;border-right:1px solid #7892C6;">
                              <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="ivory">                               
                                <tr>
                                  <td rowspan="2">
                                  <!-- 这里有个SendMsg()方法  点击按钮 获取 id为img的内容  显示在id为show里面-->
                                  <div id="msg"  contenteditable style="color:#660000;background-color:ivory;font-size:14px;height:88px;width:100%;padding:5px;overflow:auto;border:0px solid;" 
                                   onKeyPress="SendMsg();" onKeyDown="checkkey();"> 这里输入聊天内容</div></td>
                                  <td></td>                                 
                                </tr>                                
                               <tr>
                                <td style="width:80px;" align="center" valign="middle"><img id="sender" src="img/send.gif"  style="cursor:hand" onClick="SendMsg();"></td>                                 
                                </tr>                                
                              </table>                        
                          </td>
                        </tr>                                                                                        
                        <tr>
                          <td id="talk41" width="11" height="61" background="img/m_21.gif"></td>
                          <td id="talk51" width='100%' background="img/m_22.gif">
                          	<span id="talkstatus" style="color:gray;font-size:12px;"></span>
                          </td>
                          <td id="talk61" width="11" height="61"><img src="img/m_24.gif" width="13" height="62"></td>
                        </tr>                       
                      </table>                    
                  </td>
                </tr>
              </table>                   
        </td>
        <!-- 第二列 -->
        <td valign="top" id="mainright" align='center' height="370" width="20%">
            <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
              <tr>
                <td width='1' bgcolor="#61C0F6"></td>
                <td>
                	<table width="100%" height="100%" cellpadding="0" cellspacing="0" style="font-size:12px;color:#08789D;">
                    <tr height="24px" style="background-image: url(img/t_12.gif)">                  
                      <td style="cursor:pointer;width:30px;" align='center' >
                      	<img src="img/r2.gif" style="margin-right:3px;cursor:hand"  title="咨询列表"> </td>
                      <td>&nbsp;</td>
                    </tr>
                    
                    <tr height="100%">
                    <!-- 这里展示放聊天人的列表 -->
                      <td colspan='2' id="rightmiddle1" valign="top" width='100%' height='100%' >
                   		    
                     	 <div id="shortcutboard"  style="width:190;height:100%;OVERFLOW:auto;color:#000000;font-size:12px;padding:5px;background-color:#CEEBFA;">
                     	 	 这里展示放聊天人的列表。。</div>
                     	 </td>
                    </tr>                    
                      </table></td>
                    </tr>
                                													
                </table></td>
              </tr>
            </table>
          <!-- main-right -->
        </td>
      </tr>
    </table>
	
</body>

<!-- add by lix, about websocket client -->
<script type="text/javascript">
	var socket;
	var receive_text=document.getElementById("receive");
	var send_text=document.getElementById("send");
	function addText(msg)
	{
	    receive_text.innerHTML+="\n"+msg;
	}
	var chat=function(obj) 
	{
	    obj.disabled="disabled";
	    socket = new WebSocket('ws://127.0.0.1:8080/wechat/chatserver');
	    receive_text.innerHTML+="正在连接服务器……";
	    
	    //打开Socket 
	    socket.onopen = function(event) 
	    {
	        addText("连接成功！");
	        document.getElementById("send_btn").disabled=false;
	    };
	    
	    socket.onmessage = function(event) 
	    {
	        addText(event.data);
	    };
	
	    socket.onclose = function(event) 
	    {
	        addText("连接断开！");
	        obj.disabled="";
	    };
	    
	    if(socket==null)
	    {
	        addText("连接失败！");
	    }
	    else
	    {
	    	
	    }
	};
	var send=function(obj)
	{
	    socket.send(send_text.value);
	    send_text.value="";
	}


</script>
    


</html>